<g:render template="../home/header" ></g:render>

<div class="row wid_1000 blk2 mTo_50" style="padding-bottom: 0px;">
    <div class="loginqu1"> 注册 </div>
    <div class="col-xs-12" style="font-size:14px;">
        %{--<g:form id="form" useToken="true" url="${url}" class="form-horizontal" role="form">--}%
        %{--<g:form id="form" class="form-horizontal" controller="member" action="save" params="[format: 'json']" role="form" >--}%
        <div class="form-group  message %{--alert--}%  col-xs-12"> </div>
        <div class="form-group form-field field-username">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-username"> 用&nbsp;&nbsp;户&nbsp;&nbsp;名: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:textField  name="username" id="form-username" placeholder="请输入用户名" class="width-100" onblur="isUnique()" />
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px; color: #ff0000;" id="message"></div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
        </div>
        <div class="form-group form-field field-password">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-password"> 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:passwordField  name="password" id="form-password" placeholder="请输入密码" class="width-100" onblur="checkpasswd()"  />
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px;color: #ff0000;" id="passwdMesg"></div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
        </div>
        <div class="form-group form-field field-passwordConfirm">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-passwordConfirm"> 确认密码: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:passwordField  name="passwordConfirm" id="form-passwordConfirm" placeholder="请再次输入密码" class="width-100" onblur="checkpasswd()" />
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px;color: #ff0000;" id="passwdConfirm"></div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
        </div>
        <div class="form-group form-field field-email">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-email"> 邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:textField  name="email" id="form-email" placeholder="请输入邮箱地址" class="width-100" onblur="isRightEmail()"/>
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px;" id="emailConfirm"><em class="red">*</em>注册邮箱将作为您找回账号的手段请真实准确填写</div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
        </div>
        <div class="form-group form-field field-cellPhone">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-cellPhone">手机号码: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:textField  name="cellPhone" id="form-cellPhone" placeholder="请输入手机号码" class="width-100" onblur="isRight()" />
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px; color: #ff0000;" id="phoneConfirm"></div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right f_l textR" for="form-validateCode">验&nbsp;&nbsp;证&nbsp;&nbsp;码: </label>
            <div class=" col-sm-4 zc_Rtxt f_l">
                <g:textField  name="validateCode" id="form-validateCode" placeholder="请输入验证码" class="width-60" />
                <input class="btn annui1 %{--btn-info--}%" id="btn" type="button" value="获取验证码" onclick="getValidateCode()" />
            </div>
            <div class="col-sm-4 f_l" style="font-size: 13px; color: #ff0000;" id="validateCodeMsg"></div>
            <div id="validateCodeShow">

            </div>
        </div>

        <div class="clearfix form-actions">
            <div class="col-md-offset-3 col-md-9 clear">
                <div class="kong_50"></div>
                <button class="btn annui1"  onclick="tijiao()">
                    <i class="icon-ok bigger-110"></i>
                    立即注册
                </button>
            </div>
        </div>
        %{--</g:form>--}%
    </div>
    <div class="ying"></div>
</div>

<script>

    var wait = 30;
    var endTimeC;

    var time1= function () {
        if (wait == 0) {
            clearInterval(endTimeC);
            $("#btn").removeAttr("disabled");
            $("#btn").val("重新获取");
            wait = 30;
        } else {
            $("#btn").attr("disabled", true)
            $("#btn").val("重新获取（"+wait+"）");
            wait=wait-1;
        }
    }

    var time = function () {
        endTimeC = setInterval(function(){
            time1();
        }, 1000);
    }

        function isRight(){
            var cellPhone = $("#form-cellPhone").val();
            var regPartton=/1[3-8]+\d{9}/;
            //alert(cellPhone);
            if(cellPhone == ""){
                $("#phoneConfirm").html("请输入手机号");

            }else if(!regPartton.test(cellPhone) || cellPhone.length<11){
                 $("#phoneConfirm").html("请输入有效手机号");
                 $("#form-cellPhone").val('')
            }else {
                $("#phoneConfirm").html("");
            }
        }
        function isRightEmail(){
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            var email = $("#form-email").val();
           if(!myreg.test(email))
            {
                 $("#emailConfirm").html("请输入正确的E_mail").attr("style", "color:#ff0000;font-size: 13px");
              // myreg.focus();
                 $("#form-email").val('');
           }else{
                $("#emailConfirm").html("");
           }
        }
    function getStrLength(str) {
        var cArr = str.match(/[^\x00-\xff]/ig);
        return str.length + (cArr == null ? 0 : cArr.length);
    }
        function isUnique(){
            var userName = $("#form-username").val();
            if(userName != ""&&getStrLength(userName)>=6){

                var data = {username:userName};
                var url = '<g:createLink controller="member" action="isUnique"/>';
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function(data){
                        if(data.memberId){
                            $("#message").html("该用户名已经存在");
                            $("#form-username").val('');
                        }else if(data.memberId == ''){
                            $("#message").html("");
                        }
                    }
                });
            }else if(userName == ""){
                $("#message").html("请输入用户名");
            }else if(getStrLength(userName) <= 6){
                $("#message").html("请重新填写，用户名不得小于六位");
            }

        }
        (function($) {
            $(".selectPicker").selectPicker({
                width: 700, height: 500
            });
            $(".chosen-select").chosen();
            $('#form').ajaxForm({
                beforeSubmit: function() {
                    $("#form").jqFormClearErr();
                    $("#form").find("input[type=submit]").attr("disabled", true);
                },
                success: function(response) {

                    var userId = response.userId;
                    $("#form").find("input[type=submit]").attr("disabled", false);
                    if(response.error == 1) {
                        alert(response.message);
                        return
                    }
                    $("#form").jqFormResponse({
                        response: response,
                        successUri: "<g:createLink action='success'/>"+"?userId=" + userId
                    });

                },
                error: function() {
                    $("#form").find("input[type=submit]").attr("disabled", false);
                }
            });
        }(jQuery));

        function getValidateCode() {
            var cellPhone = $("#form-cellPhone").val();
            jQuery.ajax({
                type: 'POST',
                data: 'cellPhone=' + cellPhone,
                url: '/photobox/member/getValidateCode',
                success: function (data, textStatus) {
                    //console.log(data);
//                        jQuery('#validateCodeShow').text(data.message);
                    jQuery('#phoneConfirm').text(data.message);
                    if (data.status == 1) {
                        time();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        }
    function tijiao(){
        var username = $('#form-username').val();
        var password = $('#form-password').val();
        var passwordConfirm = $('#form-passwordConfirm').val();
        var email = $('#form-email').val();
        var cellPhone = $('#form-cellPhone').val();
        var validateCode = $('#form-validateCode').val();
        if(username == "") {
            $("#message").html("请输入用户名");
            return false;
        }else if(password == ""){
            $("#passwdMesg").html("请至少输入6位密码");
            return false;
        }else if(passwordConfirm == ""){
            $("#passwdConfirm").html("请确认密码");
            return false;
        }else if(email == ""){
             $("#emailConfirm").html("请输入正确的E_mail");
            return false;
        }else if(cellPhone == ""){
            $("#phoneConfirm").html("请输入手机号");
            return false;
        }else if(validateCode == ""){
            $("#validateCodeMsg").html("请输入验证码");
            return false;
        }
        var data = {username:username,password:password,passwordConfirm:passwordConfirm,email:email,cellPhone:cellPhone,validateCode:validateCode};
        var url = '<g:createLink controller="member" action="save"/>';
       $.ajax({
             type: "POST",
             url: url,
             data: data,
             dataType: "json",
             success: function(data){
                 if(data.error){
                    $("#validateCodeMsg").html(data.message);
                 }else{
                     window.location.href =  '<g:createLink controller="member" action="success"/>';
                 }
              }
         });
    }

    function checkpasswd(){
        var passwd1 = $("#form-password").val();
        var passwd2 = $("#form-passwordConfirm").val();
        if(!passwd1 || passwd1.length < 6 ){
            $("#passwdMesg").html("请至少输入6位密码");
            //return;
        }else if(!passwd2 && passwd1.length>=6){
            $("#passwdConfirm").html("请确认密码");
            $("#passwdMesg").html("");
            //return;
        }else if(passwd1 && passwd2 && (passwd1 != passwd2) && passwd1.length>=6){
            $("#passwdConfirm").html("两次输入密码不一致");
            $("#passwdMesg").html("");
        }else {
            $("#passwdMesg").html("");
            $("#passwdConfirm").html("");
        }
    }

</script>

%{--登录弹出框--}%
<div id="LoginBox">
    <div class="loginqu1">
        登录<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
    </div>
    <div class="loginqu">
        <label>用户名/邮箱:</label> <span class="inputBox">
        <input type="text" id="txtName" placeholder="账号/邮箱" />
    </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
    </div>
    <div class="kong_20"></div>
    <div class="loginqu">
        <label>密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <span class="inputBox"><input type="password" id="txtPwd" placeholder="密码" /></span>
        <a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
    </div>
    <div class="kong_5"></div>
    <div class="loginqu" style="height: 20px;">
        <label style="height: 20px;">&nbsp;</label>
        <span class="inputBox" id="message"style="color:red; font-size: 14px; line-height: 20px; border: none; "></span>
    </div>
    <div class="kong_5"></div>
    <div class="loginqu mBo_10">
        <label><input type="checkbox" value="下次自动登录" class="fu_btn" width="20" height="20"/></label> <span class="fu_con">下次自动登录</span>
    </div>
    <div class="loginqu">
        <a href="#" id="loginbtn">登录</a>
        <a href="${createLink(controller: 'member',action: 'forgetPwd')}" id="forgetPwd">忘记密码？</a>
    </div>
</div>
<script type="text/javascript" src="${resource(dir:'/photobox',file:'pop_login.js')}"></script>

<script>
    $("#loginbtn").on('click', function () {

        var txtName = $("#txtName").val();
        var txtPwd = $("#txtPwd").val();
        if (txtName == "" || txtName == undefined || txtName == null) {
            if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                $(".warning").css({ display: 'block' });
            }
            else {
                $("#warn").css({ display: 'block' });
                $("#warn2").css({ display: 'none' });
            }
        }
        else {
            if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                $("#warn").css({ display: 'none' });
                $(".warn2").css({ display: 'block' });
            }
            else {
                $(".warning").css({ display: 'none' });
            }
        }
        $.ajax({
            url: "${domain_name}member/login", //用于登录验证的服务器端请求地址
            type: 'POST',
            data:{username:txtName, password:txtPwd},
            dataType: 'json',
            timeout: 1000,
            error: function(){
                $("#message").html('登录失败');
            },
            success: function(result){
                if(result.message!=null){
                    $("#message").html(result.message);
                }
                if(result.status==1){
                    $("#message").html("");
                    $("#loginbtn").html("登录中");
                    window.location.reload()
                }
            }

        });
    });

    $(function(){
        $('#_popul').click(function(){
            if(!'${session.userId}'){
                sAlert("您还没有登录，请登录！");
                $(document).scrollTop(0);
                //$(this).fadeOut();
            }else if('${session.isiPhotographer}'=="0"){
                sAlert("对不起，你目前还不是摄影师或者您的申请还未通过审核，暂时不能使用“发表作品”功能");
            }else{
                window.location.href="/photobox/photo/add"
            }
        });
    });
</script>
%{--/登录弹出框--}%


</body>

</html>

%{--<g:render template="../home/footer" ></g:render>--}%



